<template>
  <template v-for="c in componentlist" :key="c.id">
    <component
      :is="c.name"
      class="component-highlight"
      :class="{ active: active === c.id }"
      v-bind="{ props: c.props, events: c.events }"
      @click="$emit('on-select', c.id)"
    >
      <template v-if="c.props?.text">
        {{ c.props?.text }}
      </template>
      <template v-if="c.children && c.children.length > 0">
        <CustomComponent :componentlist="c.children" />
      </template>
    </component>
  </template>
</template>

<script lang="ts">
export default { name: 'CustomComponent' };
</script>
<script setup lang="ts">
import { PropType } from 'vue';
import { ComponentDataType } from '../../../store/storeTypes';

defineProps({
  componentlist: {
    type: Array as PropType<ComponentDataType[]>,
    required: true
  },
  active: {
    type: String,
    default: ''
  }
});

defineEmits(['on-select']);
</script>

<style scoped>
.component-highlight {
  outline-width: 2px;
  outline-style: dashed;
  outline-color: transparent;
  outline-offset: -2px;
  transition: outline-color 0.32s ease-out;
}
.component-highlight.active {
  outline-color: rgba(250, 18, 250, 1);
}
.component-highlight:hover {
  cursor: pointer;
  outline-color: rgba(250, 18, 250, 0.5);
}
.component-highlight.active:hover {
  outline-color: rgba(250, 18, 250, 0.8);
}
</style>
